<template>
  <div ref="graphContainer" v-resize="resize" class="graph-container"></div>
</template>


<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import G6 from '@antv/g6';
const graph = ref<any>(null);
const graphContainer = ref<any>(null);
const data = reactive<any>({
  // 点集
  nodes: [
    {
      id: 'node2', // String，该节点存在则必须，节点的唯一标识
      type: 'bg-gradients-node', // 这里的 type 应该与注册的节点名称匹配
      label: 'Custom Node 2',
      gradient: 'typeGradient',
      shapeType: 'circle',
      icon: {
        text: '\uE90B',
        show: true,
      },
    },
    {
      id: 'node1', // String，该节点存在则必须，节点的唯一标识
      type: 'bg-gradients-node', // 这里的 type 应该与注册的节点名称匹配
      label: 'Custom Node 1',
      gradient: 'vertexGradient',
      shapeType: 'circle',
    },

    {
      id: 'node3', // String，该节点存在则必须，节点的唯一标识
      type: 'bg-gradients-node', // 这里的 type 应该与注册的节点名称匹配
      label: 'Custom Node 3',
      gradient: 'subordinateGradient',
      shapeType: 'circle',
    },
    {
      id: 'node4', // String，该节点存在则必须，节点的唯一标识\
      label: 'Custom Node 3',
      style: {
        fill: 'l(135) 0.15:#FFD7B1 0.85:#D900FF',
      },
    },
  ],
  // 边集
  edges: [
    {
      source: 'node1', // String，必须，起始点 id
      target: 'node2', // String，必须，目标点 id
      label: 'Edge',
    },
    {
      source: 'node3', // String，必须，起始点 id
      target: 'node2', // String，必须，目标点 id
      label: 'Edge',
    },
    {
      source: 'node3', // String，必须，起始点 id
      target: 'node4', // String，必须，目标点 id
      label: 'Edge',
    },
  ],
});

// 初始化函数
const init = () => {
  // 确保 DOM 容器已挂载
  if (graphContainer.value) {
    // 创建一个 G6 图实例
    graph.value = new G6.Graph({
      container: graphContainer.value,
      width: graphContainer.value.clientWidth,
      height: graphContainer.value.clientHeight || 500,
      layout: {
        type: 'force',
        preventOverlap: true,
      },
      defaultNode: {
        labelCfg: {
          position: 'bottom',
          style: {
            fill: 'rgba(255, 255, 255, 0.8)',
            fontSize: 12,
          },
        },
      },
      // 其他配置选项...
    });

    // 渲染图并设置数据
    graph.value.data(data);

    // 如果你还需要在图上执行其他操作，可以在这里添加
  }
};

const resize = () => {
  // 渲染图
  graph.value.render();
  setTimeout(() => {
    graph.value.paint();
  }, 16);
};
onMounted(() => {
  init();
});
</script>
<style lang="scss" scoped>
.graph-container {
  width: 100%;
  height: 100%;
}
</style>
